<template>
  <van-row class="card-content-item" @click.native="$emit('click', content)">
    <van-cell clickable is-link>
      <template #icon>
        <van-image round width="30px" height="30px" fit="contain" src='none'>
          <template v-slot:error><span>{{content.id}}</span></template>
        </van-image>
      </template>
      <template #title>
        <van-row class="card-content-item-title">{{content.item.substr(0, content.item.indexOf('。'))}}</van-row>
      </template>
    </van-cell>
    <van-row class="card-content-item-text">
      <span>{{content.item.substr(content.item.indexOf('。') + 1)}}</span>
    </van-row>
  </van-row>
</template>

<script>
export default {
  name: 'CardContentItem',
  props: ['content']
}
</script>

<style scoped lang="less">
  .card-content-item {
    margin-bottom: 5px;
    .card-content-item-title {
      font-size: 12px;
    }
    .card-content-item-text {
      background-color: white;
      padding: 10px 16px;
      font-size: 12px;
      color: #969799;
    }
  }
  .card-content-item:active{
    background-color: #F2F3F5;
  }
  .van-cell {
    font-size: 14px;
    padding: 5px 16px;
    .van-row {
      padding: 0px 10px;
      line-height: 30px;
    }
    span {
      font-size: 14px;
      font-weight: 600;
      color: #fcb106;
    }
    .van-cell__right-icon {
      line-height: 30px;
    }
  }
</style>
